<template>
  <div>
    <el-card
      :shadow="shadow"
      :body-style="{ display: 'flex', padding: 0 }"
      class="OrderCardColor"
      :style="
        isimg === true
          ? `background:url(${backgroundimage}) no-repeat center/cover;`
          : `background:${backgroundcolor}`
      "
    >
      <div style="width: 100%">
        <div class="secondary-font">
          <div>{{ name }}</div>
          <div class="right-top">
            <div class="right-top-box">
              <i v-show="!rightTop" class="icon iconfont" :class="icon" />
              <div v-show="rightTop" class="text">{{ rightTop }}</div>
            </div>
          </div>
        </div>
        <div class="important-font">
          {{ value }} <span class="dw">{{ unit }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "GradientColorCard",
  props: {
    shadow: {
      type: String,
      default: "hover",
    },
    icon: {
      type: String,
      default: "icon-ship",
    },
    rightTop: {
      type: String,
      default: "",
    },
    backgroundcolor: {
      type: String,
      default: "#2ec7c9",
    },
    backgroundimage: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Number],
      default: "0",
    },
    unit: {
      type: String,
      default: "单位",
    },
    name: {
      type: String,
      default: "名称",
    },
    headstyle: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    isimg() {
      if (this.backgroundimage) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang="scss">
.card-base {
  // margin: 0 0 34px 20px;
  border-radius: 10px;
  // width: 30%;
}
.OrderCardColor {
  @extend .card-base;
  // 深蓝-》浅蓝
  // background: linear-gradient(200deg,RGB(124,207,250),RGB(72,108,225));
  // 红
  // background: linear-gradient(200deg,RGB(255,156,162),RGB(255,108,118));
  // background: linear-gradient(200deg,#FED29D,#FF9953);
  // 绿
  // linear-gradient(200deg,#FED29D,#FF9953)
  text-align: left;
  position: relative;
  color: #fff;
  padding: 7px;
  .important-font {
    position: relative;
    font-size: 30px;
    font-weight: 700;
    margin-top: 10px;
    .dw {
      font-size: 11px;
      font-weight: 500;
    }
  }
  .secondary-font {
    display: flex;
    justify-content: space-between;
    text-align: left;
    .right-top {
      width: 10px;
      position: relative;
      &-box {
        position: absolute;
        font-size: 30px;
        right: 10px;
        i {
          font-size: 1em;
        }
        .text {
          font-size: 25px;
        }
      }
    }
  }
}
</style>
